<template>
  <div class="header1">
    <div><h1>自由行</h1></div>
    <div class="inputDiv">
      <input-nav-zyx-vue
        style="width: 115px"
        class="inp1"
        @GetFocus="getFocus"
        @EndFocus="endFocus"
        :InputVal = val
      >
        <div
          class="input1"
          v-show="is"
          @mouseover="isFocus = true"
          @mouseout="isFocus = false"
        >
          <p>热门出发地</p>
          <p>
            <a @click="AClick(item)" v-for="(item, i) in list" :key="i">{{ item }}</a>
          </p>
          <input type="text" placeholder="搜索城市（支持汉字、首字母查询 )" />
        </div>
      </input-nav-zyx-vue>
        
      <i></i>
      <input-nav-zyx-vue
        @GetFocus="getFocusx"
        @EndFocus="endFocusx"
        style="width: 428px"
        placeholder="请输入目的地/产品名称"
        :InputVal = val2
      >
        <div
          class="input2"
          v-show="isx"
          @mouseover="isFocusx = true"
          @mouseout="isFocusx = false"
        >
        <p>国内</p>
        <div v-for="item1,i in list2.gn" :key="i">
            <p>{{item1.name}}</p>
            <p>
                <a @click="BClick(item11)" v-for="item11,ii in item1.list" :key="ii">{{item11}}</a>
            </p>
        </div>
        <p>出镜</p>
        <div v-for="item1,i in list2.cj" :key="i">
            <p>{{item1.name}}</p>
            <p>
                <a @click="BClick(item11)" v-for="item11,ii in item1.list" :key="ii">{{item11}}</a>
            </p>
        </div>
        </div>
      </input-nav-zyx-vue>
      <i></i>
    </div>
  </div>
</template>
<script>
import InputNavZyxVue from "@/components/comm/InputNavZyx.vue";

export default {
  data() {
    return {
      is: false,
      isFocus: false,

      isx: false,
      isFocusx: false,

      val:'上海 ',
      val2:'',

      list: [
        "全国",
        "北京",
        "天津",
        "上海",
        "杭州",
        "广州",
        "深圳",
        "成都",
        "重庆",
        "昆明",
        "武汉",
        "西安",
        "香港",
        "澳门",
      ],
      list2:{
          gn:[{
              name:"热门",
              list:['三亚','厦门','成都','重庆','桂林','丽江','西安','杭州','拉萨','北海','九寨沟',]
          }],
          cj:[
              {
                  name:"日本",
                  list:['东京','大阪','冲绳','北海道','名古屋','福冈','札幌',]
              },
              {
                  name:"泰国",
                  list:['曼谷','普吉岛','清迈','苏梅岛','甲米',]
              },
              {
                  name:"海岛",
                  list:['巴厘岛','马尔代夫','塞班岛','芽庄','长滩岛','沙巴','毛里求斯','塞舌尔','留尼汪','夏威夷','关岛',]
              },
              {
                  name:"亚洲",
                  list:['马来西亚','越南','吴哥窟','迪拜','尼泊尔',]
              },
              {
                  name:"欧美",
                  list:['美国','洛杉矶','旧金山','法国','俄罗斯','罗马','德国','英国','贝加尔湖',]
              },
              {
                  name:"大洋洲",
                  list:['澳大利亚','悉尼','新西兰','斐济','大溪地',]
              },
              {
                  name:"港澳台",
                  list:['香港','澳门','台湾',]
              },
          ]
      }
    };
  },
  components: {
    InputNavZyxVue,
  },
  methods: {
    getFocus() {
      this.is = true;
      console.log("test-获得焦点");
    },
    endFocus() {
      this.isFocus ? "" : (this.is = false);
      console.log("test-失去焦点");
    },
    getFocusx() {
      this.isx = true;
      console.log("test-获得焦点");
    },
    endFocusx() {
      this.isFocusx ? "" : (this.isx = false);
      console.log("test-失去焦点");
    },
    AClick(item){
        this.is = false
        this.val = item
    },
    BClick(item){
        this.isx = false
        this.val2 = item
    }
  },
};
</script>
<style lang="scss" scoped>
.header1 {
  display: flex;
  align-items: center;
  & > div:nth-child(1) {
    width: 185px;
    height: 65px;
    display: flex;
    align-items: center;
    h1 {
      font-weight: 100;
      padding-left: 10px;
    }
    &::before {
      content: "";
      background-image: url("http://css.mafengwo.net/images/sales/global-icon4.png");
      width: 28px;
height: 32px;
background-position: -70px 0;
    }
  }
  & > div:nth-child(2) {
    border-radius: 4px;
    padding: 5px;
    background-color: #ff9d00;
    display: flex;
    align-items: center;
    i:nth-child(2) {
      width: 16px;
      height: 10px;
      background-image: url("http://css.mafengwo.net/images/sales/global-icon4.png");
      background-size: 595%;
      background-position: 29px 127px;
      margin: 0 7px;
    }
    i:nth-child(4) {
      width: 79px;
      height: 30px;
      background-image: url("http://css.mafengwo.net/images/sales/global-icon4.png");
      background-size: 129%;
      background-position: 56px -57px;
      margin: 0 7px;
    }
  }
  .inp1::after{
      content: "出发";
      position: absolute;
      font-size: 12px;
      color: #666;
      right: 9px;
top: 7px;
  }
  .input1,
  .input2 {
    box-shadow: 0 0 3px rgba(255, 157, 0, 0.8);
    background-color: #fff;
    margin-top: 10px;
    padding: 20px;
  }
  .input1 {
    width: 364px;
    height: 400px;
    & > p:nth-child(1) {
      color: #666;
      font-size: 15px;
      padding: 10px 0;
    }
    & > p:nth-child(2) {
      border-bottom: 1px solid #efefef;
      a {
        margin-right: 16px;
        font-size: 14px;
        line-height: 200%;
        &:hover{
            color: #ff9d00;
            text-decoration: underline;
            cursor: pointer;
        }
      }
    }
    & > input {
      width: 312px;
      border: 1px solid #dfdfdf;
      border-radius: 2px;
      height: 34px;
      line-height: 34px;
      padding: 0 15px;
      color: #666;
      margin-top: 20px;
      outline: none;
    }
  }
  .input2 {
    width: 472px;
    &>div{
        display: flex;
        p:nth-child(1){width: 50px;color: #333;font-size: 14px;line-height: 200%;font-weight: 700;}
        p:nth-child(2){
            a{margin-right: 15px;font-size: 14px;color: #333;line-height: 200%;cursor: pointer;}
        }
        a:hover{text-decoration: underline;}
    }
    &>p{
        color: #ff9d00;
        padding: 10px 0;
        font-weight: 700;
    }
  }
}
</style>